<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图片编辑器</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript" src="/ksaui2/ksa.js" module="vue_2.7.14.js ksaui.js pic-editor-v2.js icon.css ksaui.css"></script>
    <style>
        html, body { height: 100%; width: 100%;}
    </style>
</head>
<body>

<script type="text/html" id="tpl">
    <div style="height: 100%;">
        <div class="ks-flex" style="display: none">
            <canvas class="_mycanvas-1" width="512" height="512"></canvas>
            <canvas class="_mycanvas-2" width="512" height="512"></canvas>
        </div>
        <div style="width: 100%; height: 100%;">
            <pic-editor @init_call_func="picEditor_initCallFunc" @update_call_cunc="picEditor_updateCallFunc" :update_call_canvas="picEditor_souorce_canvas_dom"></pic-editor>
        </div>
    </div>
</script>
<script>
    const pageTpl = $.tpl({
        el : '#tpl',
        data : {
            picEditor_souorce_canvas_dom : 'canvas._mycanvas-1',
        },
        render(){

        },
        methods: {
            picEditor_initCallFunc(editor){
                debug('画布vue对象', editor);
            },
            picEditor_updateCallFunc(canvas){
                // debug('画布更新回调');
            }
        }
    });
</script>

</body>
</html>
